import i18n from "@/lang";
import { datePickTypes, formItemProps } from "element-plus";
import { componentTypes } from "@/configs/compMapConfig";
const { t } = i18n.global;
const formItemKeys = Object.keys(formItemProps);

// 组件默认值
export const componentDefaultValue = Object.entries(componentTypes).reduce(
  (a, b) => ((a[b[0]] = b[1].defaultValue), a),
  {}
);
// 输入类型
export const inputType = [
  "input",
  "inputNumber",
  "number",
  "textarea",
  "editor",
];

// 获取组件type
export function getComponent(item) {
  const { type } = item;
  if (!type || !componentTypes[type]) {
    return item.render || componentTypes.input.component(item);
  }
  return componentTypes[type].component(item);
}
// 获取组件Props
export function getComponentProps(item) {
  const { type } = item;
  const label = item.formItem.label;
  const defaultProps = componentTypes[type]?.defaultProps(item) || {};
  const placeholder = inputType.includes(type)
    ? t("form.PleaseInput", { label })
    : t("form.PleaseSelect", { label });
  const compProps = {
    ...defaultProps, // 默认
    placeholder,
  };
  if (isElementDatePickType(type) && item.type.endsWith("range")) {
    compProps.startPlaceholder = t("elementPlus.StartDate");
    compProps.endPlaceholder = t("elementPlus.EndDate");
  }
  Object.assign(compProps, item?.componentProps);
  return compProps;
}

// 获取组件的modelValue
export function getComponentModelValue(item) {
  const { type } = item;
  return componentTypes[type]?.modelValue || "modelValue";
}

/* 
  内部提供类样式 1-12
 .col-start-#{$n} {
    grid-column-start: $n;
  }
  .col-span-#{$n} {
    grid-column: span $n / span $n;
  } 
 */
export const buildFormProps = () => {
  return {
    /**
     * formItem所有属性
     * 额外属性
     * class 类样式
     * visible 是否显示该列
     * type 字段类型 可映射到 element plus 组件
     * defaultValue 默认值
     * componentProps 组件属性
     * subComponentProps 子组件属性 如 el-select 的 el-options
     * help 提示文字
     * url 远程搜索
     * dictionary 数据字典key
     * render 自定义渲染
     * prefix 前缀render
     * suffix 后缀render
     * prop+Label label插槽
     * prop+Prefix prefix插槽
     * prop+Suffix suffix插槽
     * validator 验证器
     * dependencies: {
        // 触发字段。只有这些字段值变动时，联动才会触发
        triggerFields: ['name'],
        // 动态判断当前字段是否需要显示
        show(prop,value,formData){},
        // 动态判断当前字段是否需要禁用
        disabled(prop,value,formData){},
        // 动态rules
        rules(prop,value,formData){},
        // 动态必填
        required(prop,value,formData){},
       }
     */
    formItems: { type: Array, default: () => [] }, // ElFormItem 配置
    columns: { type: Number, default: 3 }, // 一行显示的列数
    gap: { type: [Number, String], default: 15 }, // 行间距
    resetText: { type: String, default: i18n.global.t("common.Reset") }, // 重置文字 为空不显示
    submitText: { type: String, default: i18n.global.t("common.Submit") },
    isCollapse: { type: Boolean, default: true }, // 是否可折叠表单
    collapseRows: { type: Number, default: 1 }, // 折叠保留的行数
    colon: { type: Boolean, default: false }, // 是否显示冒号
    triggerValidate: { type: Boolean, default: true }, // 提交是否触发表单验证
    enterSubmit: { type: Boolean, default: true }, // 回车提交表单
  };
};

export const formEmits = {
  "update:columns": (columns) => true, // 列数变化 用于响应式
  // fieldChange: (field, value) => true, // 字段值改变 不在此显式声明 内部无法判断有没有传递事件
  submit: (isValidate, rules) => true,
  reset: () => true,
  expandChange: (isExpand) => true,
  // TODO: remote 待定
  // remote
};
// 格式化传入的 props.formItems
export function normalizeProps(item) {
  const itemProps = {
    formItem: {}, // formItem属性
    // 其他自定义属性
  };
  for (const key in item) {
    if (formItemKeys.includes(key)) {
      itemProps.formItem[key] = item[key];
    } else {
      itemProps[key] = item[key];
    }
  }
  return itemProps;
}
// 是否为Element Picker类型
export function isElementDatePickType(type) {
  return datePickTypes.includes(type);
}

/**
 * 修改组件配置
 * @param {*} options
 */
export function FormInject(options) {
  const { defaultValues, defaultProps } = options;
  for (const key in defaultValues) {
    componentDefaultValue[key] = defaultValues[key];
  }
  for (const key in defaultProps) {
  }
}
